<template lang="html">
  <div class="app f6bg pb" :class='{pbReduce:isPb}'>
    <lawyer-bar />
    <lawyer-header isBorder='isBorder'/>
    <div class="contract">
      <div class="w1200">
        <city-bar :city='city' />
        <div class="contract-tab">
          <span v-for='(item,index) in tabs'
          :class='{active:index==num}'
          @click='tab(index)'>{{item}}</span>
        </div>
        <div class="contract-con">
          <ul>
            <li v-for='(item,index) in contract_info'>
              <div class="list">
                <div class="title">{{item.title}}</div>
                <div class="explain ellipsis">{{item.explain}}</div>
                <div class="check no-double" @click='down(index)'>
                  <span v-if='item.bol'>{{check.close}}</span>
                  <span v-else>{{check.check}}</span>
                </div>
              </div>
              <div class="list-con" :class='{active:item.bol}'>
                <div class="list-con-list" v-for='info in item.data'>
                  <div class="box overhide">
                    <div class="ct-name fl">{{info.sub_tit}}</div>
                    <div class="ct-time fr">更新时间：{{info.time}}</div>
                    <div class="ct-scan fr">阅读量：{{info.scan_num}}</div>
                    <div class="ct-man fr">{{info.man_info}}</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import lawyerHeader from '../header/lawyer-header.vue'
import cityBar from '../cityBar/cityBar.vue'
export default {
  data(){
    return{
      isPb:false,isBorder:true,city:[],num:0,
      tabs:['全部','劳动人事','创业融资'],
      contract_info:[
        {
          'title':'劳动合同',
          'explain':'劳动者与用人单位之间确立劳动关系，明确双方权利和义务的合同劳动者与用人单位之间确立劳动关系，明确双方权利和义务的合同',
          data:[
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'12334645',
              'time':'2017-08-28'
            },
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'123',
              'time':'2017-08-28'
            }
          ],
          bol:false,//控制下拉内容的显示与否
          show_bol:true//控制按钮内容的改变
        },
        {
          'title':'劳动合同',
          'explain':'劳动者与用人单位之间确立劳动关系，明确双方权利和义务的合同',
          data:[
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'123',
              'time':'2017-08-28'
            },
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'123',
              'time':'2017-08-28'
            }
          ],
          bol:false,
          show_bol:true
        },
        {
          'title':'劳动合同',
          'explain':'劳动者与用人单位之间确立劳动关系，明确双方权利和义务的合同',
          data:[
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'123',
              'time':'2017-08-28'
            },
            {
              'sub_tit':'劳动合同范本',
              'man_info':'大成律师事务所 张晨律师',
              'scan_num':'123',
              'time':'2017-08-28'
            }
          ],
          bol:false,
          show_bol:true
        }
      ],
      check:{check:'查阅',close:'收起'},
      show: -1,
    }
  },
  methods:{
    loadCity:function() {
      axios.get('http://cms.xinggeweb.com/api/action/foldersByParentId?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=lawyer_api&checkSum=YBrs&p={parentId:268}')
      .then((response) => {
        this.city=response.data.data.list
      })
      .catch((error) => {
        console.log(error)
      })
    },
    tab:function(index){
      this.num=index
    },
    down:function(index){
      if(this.contract_info[index].show_bol){
        this.contract_info[index].bol=true;
      }else{
        this.contract_info[index].bol=false;
      }
      this.contract_info[index].show_bol=!this.contract_info[index].show_bol;
    }
  },
  created(){
    this.loadCity(),
    document.title='名人堂-合同文档'
  },
  components:{
    lawyerHeader,
    cityBar
  }
}
</script>

<style lang="less">
@import "contract.less";
</style>
